<template>
  <div>
    <div class="header">
      <div @click="handleBack">返回</div>
      <div>{{ arr.name }}</div>
    </div>
    <div class="container">
      <img :src="panImg" />
      <!-- <img :src="isPlay ? playImg : pauseImg" @click="handleToggle" /> -->
      <img src="" alt="">
      <img mode="heightFix" :src="playitemImg" />
      <img :src="arr.picUrl" />
      <audio controls ref="singe" class="singe"></audio>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
      isPlay: false,
      playUrl: "",
      playImg: require("../../assets/icon/play.png"),
      pauseImg: require("../../assets/icon/pause.png"),
      panImg: require("../../assets/icon/pan.png"),
      playitemImg: require("../../assets/icon/play-item.png"),
    };
  },
  methods: {
    handleBack() {
      this.$router.back();
    },
    // handleToggle() {
    //   this.isPlay = !this.isPlay;
    // },
  },
  mounted() {
    var data = JSON.parse(this.$route.query.data);
    data.picUrl = data.al.picUrl;
    this.arr = data;
    this.$http(`http://47.108.197.28:3000/song/url?id=${data.id}`).then(
      (res) => {
        this.$refs.singe.src = res.data.data[0].url;
      }
    );
  },
};
</script>

<style scoped>
.singe {
  position: absolute;
  top: 1200px;
  left: 50%;
  transform: translateX(-50%) scaleY(1.8) scaleX(1.2);
  width: 500px;
}
.header {
  display: flex;
  align-items: center;
  height: 80px;
  font-size: 32px;
  padding: 0 2px;
}
.header > div:nth-child(2) {
  margin-left: 100px;
  font-size: 38px;
}
.container {
  height: 89vh;
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
}
.container > img {
  position: absolute;
}
.container > img:nth-child(1) {
  width: 600px;
  height: 600px;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
}
.container > img:nth-child(2) {
  width: 120px;
  height: 120px;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
}
.container > img:nth-child(3) {
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.container > img:nth-child(4) {
  width: 400px;
  height: 400px;
  border-radius: 50%;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
}
</style>